<template>
    <view class="latest">
        <view class="align-center pl-30 latest-title" @click="toList">
            <hj-image class="horn" src="horn-06.svg" width="42rpx" height="42rpx" />
            <text class="ft-32 ml-12">最新消息</text>
        </view>
        <view class="latest-in pl-30 pr-30 pt-10">
            <swiper
                class="swiper w100"
                :display-multiple-items="4"
                :vertical="true"
                :autoplay="true"
                :interval="4000"
                :duration="600"
                :circular="true"
            >
                <swiper-item v-for="item in list" :key="item.id">
                    <view class="ft-26 c-p space-between align-center h100" @click="toDetail(item)">
                        <view class="flex-auto pr-20 text">
                            <text class="text-over-1">{{ item.title }}</text>
                        </view>
                        <view class="text">{{ item.time }}</view>
                    </view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 新闻列表轮播组件
 * @author yinzhi
 * @date 2025-03-07
 */
import { onLoad } from '@dcloudio/uni-app'
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'LatestNews'
})

const list = ref([])

onLoad(async () => {
    await getList()
})

const getList = () => {
    // 获取最新资讯列表
    list.value = [
        { id: 1, time: '2025-03-01', title: '快来报名，汇杰一千米第一期学院火热招募中' },
        { id: 2, time: '2025-03-01', title: '快来报名，汇杰一千米第一期学院火热招募中' },
        { id: 3, time: '2025-03-01', title: '快来报名，汇杰一千米第一期学院火热招募中' },
        { id: 4, time: '2025-03-01', title: '快来报名，汇杰一千米第一期学院火热招募中' },
        { id: 5, time: '2025-03-01', title: '快来报名，汇杰一千米第一期学院火热招募中' }
    ]
}
// 点击新闻操作
const toDetail = item => {
    uni.navigateTo({
        url: '/pages/message/message-details/index'
    })
}

// 跳转新闻详情
const toList = () => {
    uni.navigateTo({
        url: '/pages/message/message-list/index'
    })
}
</script>

<style scoped lang="scss">
.horn {
    animation: dh 1.5s infinite;
}
@keyframes dh {
    0% {
        transform: scale(1) rotate(10deg);
    }
    50% {
        transform: scale(1.1) rotate(-10deg);
    }
    100% {
        transform: scale(1) rotate(10deg);
    }
}
.latest {
    &-title {
        height: 80rpx;
        background: $uni-bg-color;
    }
    .swiper {
        height: 220rpx;
        // pointer-events: none;
    }
    .text {
        text-decoration: underline;
    }
}
</style>
